<template>
  <div>
    <van-cell-group>
      <van-field label="手机号" placeholder="请输入手机号" v-model="mobile" />
      <img width="200px" height="80px" :src="imgurl" @click="getimgurl">
      <van-field label="图片验证码" placeholder="请输入图片验证码" v-model="imgcode" />
      <div style="margin: 15px">
        <van-button :disabled="flag" @click="send">{{ mse }}</van-button>
      </div>
      <van-field label="手机验证码" placeholder="手机验证码" v-model="mcode"/>
      <div style="margin: 16px">
        <van-button type="primary" @click="submit">登录</van-button>
        <a :href="wburl">微博登录</a>
      </div>
    </van-cell-group>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid'
export default {
  data() {
    return {
      mobile:'',
      imgcode:'',
      mcode:'',
      imgurl:'',
      uuid:'',
      mse: "发送验证码",
      flag: false,
      time:20,
      wburl:''
    };
  },
  mounted(){
    this.getwburl()
    this.getimgurl()
  },
  methods:{
    getwburl(){
      this.axios.get("user/getWBurl").then(res=>{
        this.wburl = res.data.url
      })
    },
    getimgurl(){
      this.uuid = uuid()
      this.imgurl = "http://127.0.0.1:8000/getImageCode?uuid=" + this.uuid
    },
    send(){
      if(this.imgcode == '' || this.imgcode == null){
        alert("必须输入图形验码")
        return false
      }
      var reg = /^1[3-9]\d{9}$/
      if(!reg.test(this.mobile)){
        alert("必须输入正确手机号")
        return false
      }
      var s = setInterval(() => {
        if (this.time == 0) {
          clearInterval(s)
          this.mse = "发送验证码"
          this.flag = false
          this.time = 20
        } else {
          this.time--;
          this.mse = this.time + '秒'
          this.flag=true
        }
      }, 1000)
      this.axios.post("/send",{"mobile":this.mobile,"imgcode":this.imgcode,"uuid":this.uuid}).then(res => {
        if (res.data.code == 200) {
          alert(res.data.msg)
        }
      })
    },
    submit(){
      this.axios.post('/login',{"mobile":this.mobile,'mcode':this.mcode}).then(res=>{
        if(res.data.code == 200){
          alert(res.data.msg)
          localStorage.setItem("userid", res.data.userid)
          localStorage.setItem("token", res.data.token)
        }
      })
    }
  }
};
</script>

<style>
</style>